<template>
  <div
    class="mt-4 w-full text-xs text-white grid grid-cols-2 gap-x-6 lg:grid-cols-3 gap-y-3 lg:gap-y-6"
    v-if="curGoodsDetail.recommendNews.length">
    <NuxtLink
      external
      :to="$localePath(`/article/${item.urlName || item.id}`)"
      v-for="(item, index) in curGoodsDetail.recommendNews">
      <YImage
        class="rounded-md mb-2 w-full lg:h-[160px] h-[100px] object-cover"
        :src="item.imageUrl"
        lazy
        alt="article image"
        height="160"
        width="248" />
      <p class="line-clamp-2 text-xs text-white2 break-all">{{ item.title }}</p>
    </NuxtLink>
  </div>
  <common-empty v-else class="mt-6 mb-4" />
  <!-- <van-empty v-else image="/v2/home-imgs/empty2.png" :description="$mt('nothing here')" /> -->
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import { useGoodsStore } from '~/store/goods'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'

const goodsStore = useGoodsStore()
const { curGoodsDetail } = storeToRefs(goodsStore)
</script>

<style lang="scss"></style>
